<template>
  <div class="article-list-wrap">
    <ArticleDetailItem
      class="infinite-list-item"
      v-for="item in articleList"
      :key="item.id"
      :articleItem="item"
      :page="1"
      @operateArticle="operateArticle"
      @focusArticle="focusArticle"
      @deleteArticle="deleteArticle"
      @updateArticle="updateArticle"
      :parentComponent="parentComponent"
    ></ArticleDetailItem>
  </div>
</template>

<script>
import ArticleDetailItem from "./ArticleDetailItem.vue";
export default {
  props: ["articleList", "parentComponent"],
  components: {
    ArticleDetailItem,
  },
  methods: {
    // 操作文章（点赞、评论、收藏、关注）
    operateArticle(method, type, id) {
      this.$emit("operateArticle", method, type, id);
    },
    // 关注、取消关注博主
    focusArticle(userId) {
      this.$emit("focusArticle", userId);
    },
    // 添加评论
    giveComment(commentForm) {
      this.$emit("giveComment", commentForm);
    },
    // 删除文章
    deleteArticle(articleItem) {
      this.$emit("articleItem", articleItem);
    },
    // 更新文章
    updateArticle(editArticleForm, articleId) {
      this.$emit("updateArticle", editArticleForm, articleId);
    },
  },
};
</script>

<style scoped lang="less">
.article-list-wrap {
  height: 100vh;
}
</style>